<template>
	<view>
		<view class="head" v-if="type == 1">
			<view class="bot mt40">
				<image src="@/static/distribution/one/1.png" mode=""></image>
				<view class="">支付宝</view>
				<view class="at"><image src="@/static/distribution/one/10.png" mode=""></image></view>
			</view>
			<view class="phone mt40"><input type="text" value="" placeholder="请输入手机号" /></view>
			<view class="phone"><input type="text" value="" placeholder="请输入真实姓名" /></view>
			<view class="tho">
				<view class="phonetwo"><input type="text" value="" placeholder="请输入真实姓名" /></view>
				<view class="phonThree">
					获取验证码
				</view>
			</view>
		</view>
		
		<view class="head" v-if="type == 2">
			<view class="bot mt40">
				<image src="@/static/distribution/one/2.png" mode=""></image>
				<view class="">支付宝</view>
				<view class="at"><image src="@/static/distribution/one/10.png" mode=""></image></view>
			</view>
		<view class="loda">
				<image src="@/static/distribution/one/88.png" mode="" @click="choseImage" v-show="fate"></image>
				<image :src="image" ></image>
			
		</view>
		<view class="adx" v-show="fate">
			请上传微信收款码
		</view>
			<view class="but" @click="but" v-show="!fate">
				重置图片
			</view>
		</view>
		
		<view class="head" v-if="type == 3">
			<view class="bot mt40">
				<image src="@/static/distribution/one/11.png" mode=""></image>
				<view class="">银行卡</view>
				<view class="at"><image src="@/static/distribution/one/10.png" mode=""></image></view>
			</view>
			<view class="phone mt40"><input type="text" value="" placeholder="请输入银行卡" /></view>
			<view class="phone"><input type="text" value="" placeholder="请输入所属银行" /></view>
			<view class="phone"><input type="text" value="" placeholder="请输入真实姓名" /></view>
			<view class="phone"><input type="text" value="" placeholder="请输入银行预留手机号" /></view>
			<view class="tho">
				<view class="phonetwo"><input type="text" value="" placeholder="请输入验证码" /></view>
				<view class="phonThree">
					获取验证码
				</view>
			</view>
			
		</view>
	
		<view class="foot">确定</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: 0,
			image:'',
			fate:true
		};
	},
	onLoad(e) {
		this.type = e.type;
	
	},
	methods:{
		choseImage(){
			let that=this
			uni.chooseImage({
			    count: 1, //默认9
			    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			    sourceType: ['album'], //从相册选择
			    success: function (res) {
			  
					that.image=JSON.stringify(res.tempFilePaths)
					that.image=JSON.parse(that.image)[0]
				
					that.fate=false
					
			    }
			});
		},
		but(){
			this.fate=true,
			this.image=''
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f4f8;
}
.head {
	.phone {
		width: 95%;
		height: 64rpx;
		line-height: 64rpx;
		background-color: #ffffff;
		margin: 0 auto;
		border-radius: 999rpx;
		text-align: center;
		margin-bottom: 20rpx;
		input {
			font-size: 20rpx;
			height: 64rpx;
		}
	}
	.tho{
		display: flex;
		width: 95%;
		height: 64rpx;
		line-height: 64rpx;
		margin: 0 auto;
		text-align: center;
		margin-bottom: 20rpx;
		.phonetwo{
			width:472rpx;
			height:64rpx ;
			background-color: #FFFFFF;
			border-radius: 999rpx;
			input {
				font-size: 20rpx;
				height: 64rpx;
			}
		}
		.phonThree{
			margin-left: 20rpx;
			flex: 1;
			background-color: #FFFFFF;
			border-radius: 999rpx;
			font-size: 20rpx;
			color: grey;
		}
	}
}
.bot {
	margin-bottom: 20rpx;
	height: 88rpx;
	width: 100%;
	background-color: #ffffff;
	line-height: 88rpx;
	padding-left: 30rpx;
	height: 45px;
	position: relative;
	font-size: 32rpx;
	display: flex;
	align-items: center;
	image {
		margin-right: 16rpx;
		width: 48rpx;
		height: 48rpx;
	}
	.at {
		width: 88rpx;
		height: 88rpx;
		position: absolute;
		right: 0;
	}
}
.foot {
	width: 100%;
	height: 88prx;
	position: fixed;
	bottom: 0;
	background-color: #2399f6;
	text-align: center;
	line-height: 88rpx;
	color: #ffffff;
}
.mt40 {
margin-bottom: 40rpx;
}
.loda{
	
	width:300rpx;
	height:300rpx;
	margin: 0 auto;
	image{
		width: 300rpx;
		height: 300rpx;
	}
}
.but{
	width: 150rpx;
	height: 50rpx;
	line-height: 50rpx;
	font-size: 28rpx;
	margin: 0 auto;
	margin-top: 48rpx;
	background-color: #2399f6;
	text-align: center;
	color: #FFFFFF;
	border-radius: 20rpx;
}
.adx{
	margin: 0 auto;
	width: 100%;
	margin-top: 48rpx;
	height: 40rpx;
	text-align: center;
	line-height:40rpx;
	font-size:28rpx;
	color:rgba(97,97,97,1);
}
</style>
